<template>
	<!-- 顶部标题 -->
	<view class="Login">
		<pdaScan></pdaScan>
		<!-- 导航栏内提示区 -->
<!-- 		<transition name="slide-fade">
			<view v-if="showNavTip" class="nav-tip">{{ navTipText }}</view>
		</transition> -->

		<view class="Login1">
			<view class="Login1-2">
				<image class="logo" src="@/static/log/LoginLogo.png" @click="tiaozuan"></image>
				<!-- <img src="/src/static/log/LoginLogo.png" alt="" /> -->
			</view>
			<view class="Login1-3">
				<text class="Login1-3-text">防差错配料系统</text>
			</view>
			<view class="Login1-4">
				<view class="Login1-4-0">

					<view class="Login1-4-1">
						<!-- <input class="uni-input" v-model="use" focus placeholder="请输入账号" />-->
						<input class="uni-input" :focus="focususe" @confirm="confirmuse"
							:placeholder="t('login.username')" v-model="use"  @click="clickuse"/>
						<image class="password-icon   " :src="showClearIcon ? '/static/icon/svg/close.svg' : ''"
							@click="clearIcon" mode="widthFix"></image>
					</view>

					<view class="Login1-4-1">
						<input class="uni-input  fixed-size-input" :focus="focuspad" @confirm="confirmpad"
							:placeholder="t('login.password')" v-model="pad" :password="showPassword"></input>
						<image class="password-icon fixed-size-as  "
							:src="showPassword ? '/static/icon/svg/eye-close.svg' : '/static/icon/svg/eye-clos.svg'"
							@click="changePassword" mode="widthFix"></image>
					</view>



				</view>
			</view>

			<!-- //记住密码 -->
			<view class="Login1-5">
				
					<checkbox   
					:checked="psw"
					@click="remember" 
					color="#09CC86" />{{ t('login.rememberMe') }}
					<text style="color: red;">{{ navTipText }}</text>
			
			</view>
			<!-- 登录 -->
			<view class="Login1-6">
				<button type="submit" class="Login1-6-button" @click="validateForm">{{ t('login.login') }}</button>
			</view>

			<view class="Login1-7">
				<view class="Login1-7-1">
					<image src="@/static/icon/system2.png" style="width: 17px; height: 17px; margin-right: 5px"></image>
					<view class="Login1-7-text1" @click="switchLang('zh-CN')">{{ t('login.Chinese') }}</view>

				</view>
				<view class="Login1-7-3">|</view>
				<view class="Login1-7-2">
					<image src="@/static/icon/system3.png" style="width: 30px; height: 30px"></image>
					<view class="Login1-7-text2" @click="switchLang('en-US')">{{ t('login.English') }}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
import login from '@/api/LoginAPI';
import { ref, onMounted, onUnmounted } from "vue";
import { onHide, onLoad, onShow } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n';
// 修改后（正确）：
import pdaScan from '@/components/pda-scan.vue'
// 切换语言函数 - 确保定义在顶层作用域
let FocusInput = ref('use');//广播焦点

onShow(() => {
	//  #ifdef APP-PLUS
	//接收广播
	console.log("接收广播");
	uni.$on('xwscan', (data) => {
		//接收到广播时赋值输入框，并触发该输入框的回车事件
		// console.log( "嗡嗡嗡分"+data.
			use.value = data.code.trim();
		
	})
	// #endif
});
onHide(() => {
	//  #ifdef APP-PLUS
	// 移除事件
	console.log("移除广播");
	uni.$off('xwscan')
	// #endif
})
//销毁页面时销毁广播
onUnmounted(() => {
	console.log('广播销毁onunload');
	uni.$off('xwscan');
});
//页面加载时
//onMounted这个是页面加载时触发的，和onLoad不同的是，onLoad是页面加载时触发的，onMounted是页面加载完成后触发的
onMounted(() => {
	// 从本地存储获取语言设置
	const savedLang = uni.getStorageSync('lang');
	if (savedLang) {
		locale.value = savedLang; // 设置当前语言
	}
	// 从本地存储获取记住的账号密码信息
	const savedLoginInfo = uni.getStorageSync('puude');
	console.log(savedLoginInfo);
	// console.log(savedLoginInfo);
	console.log("记住密码"+psw.value);
	if (savedLoginInfo) {
		use.value = savedLoginInfo.use;
		pad.value = savedLoginInfo.pad;
		psw.value = savedLoginInfo.psw;
	}
})

const remember=()=>{

 psw.value = !psw.value
 console.log("psw已变为",psw.value)
}

// import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();
const switchLang = (lang: string) => {
	api().then((res: any) => {
		use.value = res.data;
		console.log(res);
	})
	console.log(lang);
	locale.value = lang; // 改变当前语言
	uni.setStorageSync('lang', lang); // 保存到本地存储，下次打开应用仍生效
};
// #region 账号
let use = ref<string>(""); // 定义一个响应式变量 value，用于绑定输入框的
let focususe = ref<boolean>(true);//账号输入框焦点开始自动获取家电
let showClearIcon = ref<boolean>(false);//清除账号图标
const clearIcon = function () {
	use.value = '';
	showClearIcon.value = false;
};
const clickuse=()=>{
	focususe.value = false;
	focuspad.value = true;
}
// #endregion
// #region 记住密码
let psw = ref<boolean>(false);
// #region 密码
let pad = ref<string>(""); // 定义一个响应式变量 pad，用于绑定输入框的密码
let focuspad = ref<boolean>(false);//密码输入框焦点开始自动获取家电
let showPassword = ref<boolean>(true);//密码图标
const changePassword = () => {
	showPassword.value = !showPassword.value;
};
//密码输入框回车时
const confirmpad = () => {
	validateForm();
}
//账号输入框回车时
const confirmuse = () => {
	console.log("账号输入框回车");
	focususe.value = false;
	focuspad.value = true;
}
// #endregion
// #endregion
//用于跳转到另一个登录页
const tiaozuan = () => {
	// uni.navigateTo: 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
	uni.navigateTo({
		url: '/pages/Login/Login2'
	});
}

//顶部弹出提示栏
let showNavTip = ref<boolean>(false);
let navTipText = ref<string>("");

const handleLogin = (title: string, ins?: number) => {

	// 登录成功后
	showNavTip.value = true;
	navTipText.value = title;
	// 3秒后自动隐藏
	setTimeout(() => showNavTip.value = false, ins ? ins : 3000);
}
// #region 登录功能块
//监听输入内容
//判断输入内容是否有空格
const validateAccount = (value: string, typea: string): boolean => {
	let accountError: any;
	// 正则表达式：检查是否包含任何空格
	// \s 匹配所有空白字符（空格、制表符、换行等）
	const hasSpace = /\s/.test(value);
	if (hasSpace) {
		// 设置错误提示
		accountError = typea + '不能包含空格，请重新输入';
		console.log(accountError);
		handleLogin(accountError, 1500);
		// 可选：自动去除空格（根据需求选择是否开启）
		// this.use = this.use.replace(/\s/g, '');
		return false;
	} else {
		// 验证通过，清空错误提示
		accountError = '';
		return true;
	}
}

// 验证密码账号是否为空
// 1. 表单验证子功能块
const validateForm = () => {
	// console.log(use.value, pad.value);

	if (!use.value) {
		handleLogin("请输入账号", 1500);
		return false;
	}
	let boole = validateAccount(use.value, "账号");
	if (!boole) return false;
	boole = validateAccount(pad.value, "密码");
	if (!boole) return false;
	if (!pad.value) {
		handleLogin("请输入密码", 1500);
		// uni.showToast({ title: '请输入密码', icon: 'none' });
		return false;
	}
	// 在uni-app中不建议使用alert，使用uni.showToast提示登录成功
	// 原代码位置在 return true; 之后，属于无法访问的代码，将其移至 return true; 之前
	if (true) { // 表单验证通过
		handleLogin("登陆成功", 1500);
		// //点击登录按钮，去api文件请求接口
		login.login(use.value, pad.value).then((res: any) => {
			console.log(res);
		})
		//记住密码
		if (psw.value) {
			console.log("已经缓存账号密码")
			let puude = {
				use: use.value,
				pad: pad.value,
				psw: psw.value
			}
			uni.setStorageSync('puude', puude);
		}else{
			uni.setStorageSync('puude',"");
		}


		// 跳转到首页
		uni.navigateTo({
			url: '/pages/Login/Hone'
		});
	}
	return true;
};
// #endregion
const api = () => {
	return uni.request({
		url: 'https://localhost:7228/api/Login/GetHome',
		method: 'GET',
		data: {

		}
	});
}
</script>
<style scoped>
.Login {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	/* margin-top: 40px; */
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	min-height: 100vh;
	background-color: #F7FDFF;
	background-size: 100% 100%;
}

.Login1 {
	/* background-color: #f8f3f1; */
	width: 350px;
	height: 500px;
	margin-top: 77px;
	border-radius: 20px;
	opacity: 1;
	/* 0~1之间，越小越透明 */
}

.Login1-2 {
	/* background-color: darkcyan; */
	height: 125px;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	/* 水平居中 */
	align-items: center;
	/* 垂直居中 */
}

.logo {
	/* margin: 5px 5px; */

	width: 300px;
	height: 80px;
	border-radius: 20px;
}

.Login1-3 {
	display: flex;
	/* background-color: aqua; */
	width: 100%;
	height: 75px;
	/* 垂直居中 */
	/* align-items: center;  */
	justify-content: center;
	/* 水平居中 */
}

.Login1-3-text {
	/* font-size: 32rpx; */
	font-size: 25px;
	color: #536d6c;
	transform: scaleX(1.2);
	/* 水平方向拉长1.5倍 */
	letter-spacing: 2px;
}

.Login1-4 {
	/* background-color: mediumseagreen; */
	width: 100%;
	height: 25%;
	display: flex;
	justify-content: center;
	/* 水平居中 */
}

.Login1-4-0 {
	/* background-color: #fff; */
	width: 100%;
	height: 125px;

	/* flex-direction: row; */
}

.Login1-4-1 {
	/* background-color: red; */
	width: 100%;
	height: 64px;
	display: flex;
	align-items: center;
	/* 垂直居中 */
	justify-content: center;
	/* 水平居中 */
	/* 垂直居中 */
	position: relative;
}

.uni-input {
	font-size: 20px;
	width: 90%;
	height: 50px;
	border: 1px solid #000;
	border-radius: 20px;
	padding-left: 20px
}

.fixed-size-input {
	font-family: system-ui, -apple-system, sans-serif;
}

.password-icon {
	width: 24px;
	/* 图标宽度 */
	height: 24px;
	/* 图标高度 */
	position: absolute;
	/* 绝对定位，让图标可以放在输入框内 */
	right: 23px;
	/* 距离输入框右侧15px */
	top: 50%;
	/* 垂直方向居中对齐 */
	transform: translateY(-50%);
	/* 精确居中，就像把地图贴在正中间 */
	color: #838383;
}

.fixed-size-as {
	width: 30px;
	/* 图标宽度 */
	height: 24px;
	/* 图标高度 */
}

.Login1-5 {
	/* background-color: peru; */
	height: 50px;
	padding-top: 15px;
	padding-left: 25px;
}


.Login1-6 {
	/* background-color: bisque; */
	width: 100%;
	height: 15%;
}

.Login1-6-button {
	width: 100%;
	height: 55px;
	background-color: #4c73ee;
	border-radius: 20px;
	font-size: 30px;
	line-height: 55px;
	color: #fff;
}

.Login1-7 {
	/* background-color: darkcyan; */
	height: 50px;
	display: flex;
	justify-content: space-between;
	/* 两个子元素之间的间距 */
}

.Login1-7-1 {
	width: 155px;
	height: 50px;
	/* background-color: greern; */
	display: flex;
	align-items: center;
	/* 垂直居中 */
	/* 两个子元素之间的间距 */
	/* justify-content: space-between;  */

	justify-content: flex-end;
}

.Login1-7-3 {
	display: flex;
	align-items: center;
	/* 垂直居中 */
	justify-content: center;
	/* 水平居中 */
	width: 16px;
	height: 50px;
}

.Login1-7-2 {
	width: 155px;
	height: 50px;
	background-color: greern;
	display: flex;
	align-items: center;
	/* 垂直居中 */
}

.Login1-7-text1 {
	margin-right: 11px;
	font-size: 20px;
}

.Login1-7-text2 {
	font-size: 20px;
}


/* 导航栏提示框样式：像冰箱贴一样贴在屏幕上 */
/* 弹出收回动画样式 */
.slide-fade-enter-from,
.slide-fade-leave-to {
	/* 动画开始/结束状态：透明且向上偏移 */
	opacity: 0;
	/* 完全透明 */
	transform: translateX(-50%) translateY(-20px);
	/* 水平居中 + 向上偏移20px */
}

.slide-fade-enter-active,
.slide-fade-leave-active {
	/* 动画过程：300毫秒内平滑过渡 */
	transition: all 0.3s ease;
	/* all: 所有属性变化都应用动画；0.3s: 动画持续时间；ease: 缓动效果（先快后慢） */
}

.nav-tip {

	position: fixed;
	/* 固定定位：漂浮在屏幕上 */
	top: 20px;
	/* 距离顶部20px */
	left: 50%;
	/* 水平居中：左边距50%屏幕宽度 */
	transform: translateX(-50%);
	/* 水平居中修正：向左移动自身宽度的50% */
	z-index: 9999;
	/* 层级最高：确保在所有元素之上 */
	background: rgba(44, 160, 63, 0.7);
	/* 半透明背景 */
	color: white;
	/* 文字白色 */
	padding: 8px 16px;
	/* 内边距 */
	border-radius: 4px;
	/* 圆角 */
	font-size: 14px;
	/* 字体大小 */
	/* 移除原有transition，统一由动画组件控制 */
}
</style>